<!-- START SIGMA IMPORTS -->
  <script type="text/javascript" src="/graph-benchmark/views/js/jquery.js"></script> 
    <script type="text/javascript" src="/graph-benchmark/views/js/loading.js"></script> 
<script src="views/sigma/src/sigma.core.js"></script>
<script src="views/sigma/src/conrad.js"></script>
<script src="views/sigma/src/utils/sigma.utils.js"></script>
<script src="views/sigma/src/utils/sigma.polyfills.js"></script>
<script src="views/sigma/src/sigma.settings.js"></script>
<script src="views/sigma/src/classes/sigma.classes.dispatcher.js"></script>
<script src="views/sigma/src/classes/sigma.classes.configurable.js"></script>
<script src="views/sigma/src/classes/sigma.classes.graph.js"></script>
<script src="views/sigma/src/classes/sigma.classes.camera.js"></script>
<script src="views/sigma/src/classes/sigma.classes.quad.js"></script>
<script src="views/sigma/src/classes/sigma.classes.edgequad.js"></script>
<script src="views/sigma/src/captors/sigma.captors.mouse.js"></script>
<script src="views/sigma/src/captors/sigma.captors.touch.js"></script>
<script src="views/sigma/src/renderers/sigma.renderers.canvas.js"></script>
<script src="views/sigma/src/renderers/sigma.renderers.webgl.js"></script>
<script src="views/sigma/src/renderers/sigma.renderers.svg.js"></script>
<script src="views/sigma/src/renderers/sigma.renderers.def.js"></script>
<script src="views/sigma/src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="views/sigma/src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="views/sigma/src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="views/sigma/src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="views/sigma/src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="views/sigma/src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="views/sigma/src/renderers/svg/sigma.svg.utils.js"></script>
<script src="views/sigma/src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="views/sigma/src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="views/sigma/src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="views/sigma/src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="views/sigma/src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="views/sigma/src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="views/sigma/src/middlewares/sigma.middlewares.copy.js"></script>
<script src="views/sigma/src/misc/sigma.misc.animation.js"></script>
<script src="views/sigma/src/misc/sigma.misc.bindEvents.js"></script>
<script src="views/sigma/src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="views/sigma/src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<script src="views/sigma/plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="views/sigma/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="/graph-benchmark/layui/layui.js" charset="utf-8"></script>
  <link rel="stylesheet" href="/graph-benchmark/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/graph-benchmark/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="/graph-benchmark/layui/css/cascader.css" media="all">

<style>
  #container {
  	 background: #fff;
  }
  #canvas1 {
    top: 150px;
    bottom: 0;
    left: 0%;
    width:100%;
    height:1000px;
    right: 0;
        position: absolute;
    color: #000;
    background: #fff;
   
  }
  #tags {
	  height:60px;
	  width:100%;
	  background: #fff;
  }
  .label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    font-family: sans-serif;
  }
  
  /* loading css start*/
  /* Toast */
    .ibox {clear:both;margin: 0px;padding: 0px;width:100%;}
    .ibox .ibox-content {clear: both;line-height: normal;padding:25px;}
    .web_transparent {position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;}
    .web-toast {position: fixed;z-index: 5000;width: 16em;min-height: 4em;top: 365px;margin-left: 120px;background: rgba(40, 40, 40, 0.75);text-align: center;border-radius: 5px;color: #FFFFFF;} 
    .web-toast_content { font-size: 16px;}
    .sk-spinner-three-bounce.sk-spinner{margin: 20px auto 10px;text-align: center; }
    .sk-spinner-three-bounce div {width: 18px;height: 18px;background-color: #f6296d;border-radius: 100%;display: inline-block;-webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;animation: sk-threeBounceDelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
    .sk-spinner-three-bounce .sk-bounce1 {-webkit-animation-delay: -.32s;animation-delay: -.32s;}
    .sk-spinner-three-bounce .sk-bounce2 {-webkit-animation-delay: -.16s;animation-delay: -.16s;}
    @-webkit-keyframes sk-threeBounceDelay {
        0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
        40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    @keyframes sk-threeBounceDelay {
    0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
    40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    /*spinner*/
    .pinkspin{color:#ef1a60;}
    .greenspin{color:#07b30b;}
     /* loading css end*/
</style>
<div id="container">

	<div class="layui-form-item" style="margin-top:10px;">
        <label class="layui-form-label">图展示</label>
        <div class="layui-input-block" >
            <input type="text" id="a" class="layui-input" placeholder="input..." readonly="readonly">
        </div>
    </div>
    
 <div id="tags" style="display: none;">
	 <div id="tag_left" style="float:left;margin-top: 20px;width:10%;">
	 	<h3 style="margin-left: 20px;">BOM图数据</h3>
	 </div>
	 <div id=tag_right style="float:left;margin-top: 10px;">
	 	<p><h5 style="float:left;margin-left:20px;">边：</h5> <h5 id="edge" style="float:left;">0</h5>
	 	<h5 style="float:left;margin-left:20px;">顶点：</h5> <h5 id="node" style="float:left">0</h5> 
	 	 <h5 style="float:left;margin-left:20px;" id="a1"></h5>
	 	 <h5 style="float:left;margin-left:20px;" id="a2"></h5>
	 	 <h5 style="float:left;margin-left:20px;" id="a3"></h5>
	 </div>
 </div>
  <div id="canvas1">
    <div class="label">Graph Generator</div>
  </div>
  
</div>
<script>
    
</script>

<script id="example-content">

$(document).ready(function() {
	 requestContent() // 图表加载完毕后执行的回调函数
	});

function requestContent(){
	
 
}



/**
 * This example spawns three different renderers, two of them sharing
 * their camera. Also, a ForceAtlas2 runs on the graph.
 *
 * It is basically a mashup between some other examples, to show how
 * sigma behaves when instantiated in a weird and heavy configuration.
 */
 layui.config({
     base: "/graph-benchmark/lay/modules/"
 }).use(['form',"jquery","cascader"], function(){
	
	 
     var $ = layui.jquery;
     var datas = [];
     
     //----
  	$.ajax({
     url: 'highEchart/getContentList',
     success: function(redata) {
 		//document.getElementById("edge").innerHTML = data2.length-1;
 		console.log(redata.length)
 		for (var k = 0; k < redata.length-1; k++){
 			var ele = {}
 			console.log(redata[k].split("&")[1] +"("+redata[k].split("&")[0]+")")
 			ele.value = redata[k].split("&")[1]
 			ele.label = redata[k].split("&")[1] +"("+redata[k].split("&")[0]+")"
 			datas.push(ele)
 		}
 		console.log(datas)
 		 var cascader = layui.cascader;
 	     cascader({
 	     	    elem:"#a",
 	         data: datas,
 	         success: function (valData,labelData) {
 	        
 	             console.log(valData);
 	             console.log(labelData);
 	             requestData(valData)
 	             //console.log("kkk")
 	         }
 	     });
     },
     cache: false
   });
  //----

 });

function requestData(graphNames) {
	//console.log("jjj")
	document.getElementById("canvas1").innerHTML =  "";
	//开启加载框
	//debugger
	 Init.WebToast("BOM图绘制中...");
	var i,
    o,
    N = 3000,
    E = 2000,
    C = 5,
    d = 0.5,
    cs = [],
    g = {
      nodes: [],
      edges: []
    };
    
for (i = 0; i < C; i++)
	  cs.push({
	    id: i,
	    nodes: [],
	    color: '#' + (
	      Math.floor(Math.random() * 16777215).toString(16) + '000000'
	    ).substr(0, 6)
	  });
	
	  $.ajax({
	    url: 'highEchart/getGraphNode',
	    data: {graphName:escape(graphNames)},
	    success: function(data) {
	    	console.log(data.length)
	  //  	var datas = data.split
	  //  	console.log(data[2097])
	    	document.getElementById("node").innerHTML = data.length-1 ;
// ---------------绘点---------
		for (i = 1; i < data.length; i++) {
		  o = cs[(Math.random() * C) | 0];
		  g.nodes.push({
		    id: data[i].split(",")[0],
		    label: data[i].split(",")[0]+","+data[i].split(",")[3],
		    plm_m_oid:data[i].split(",")[0],
		    plm_i_name:data[i].split(",")[3],
		    	plm_i_createtime:data[i].split(",")[4],
		    	plm_weight:data[i].split(",")[8],
		    	plm_wllx:data[i].split(",")[9],
		    	plm_wlly:data[i].split(",")[10],
		    x: Math.cos(2 * i * Math.PI / N),
		    y: Math.sin(2 * i * Math.PI / N),
		    size: 0.5 + 4.5 * Math.random(),
		    color: o.color
		  });
		  o.nodes.push(i);
		}
	 //   	console.log(g.nodes)
		   
	    	$.ajax({
	    url: 'highEchart/getGraphEdge',
	    data: {graphName:escape(graphNames)},
	    success: function(data2) {
		document.getElementById("edge").innerHTML = data2.length-1;
//--------------------绘边-------------------------	  		  
	    	for (i = 1; i < data2.length; i++) {
	    		  if (Math.random() < 1 - d)
	    		    g.edges.push({
	    		      id: data2[i].split(",")[0],
	    		      size: 0.5,
	    		      id: data2[i].split(",")[0],
	    		      plm_oid:data2[i].split(",")[0],
	    		      plm_leftobj:data2[i].split(",")[1],
	    		      plm_rightobj:data2[i].split(",")[2],
	    		      plm_createtime:data2[i].split(",")[3],
	    		      plm_order:data2[i].split(",")[4],
	    		      plm_jianhao:data2[i].split(",")[5],
	    		      plm_number:data2[i].split(",")[6],
	    		      source: parseInt(data2[i].split(",")[1]),
	    		      target: parseInt(data2[i].split(",")[2])
	    		    });
	    		  else {
	    		    o = cs[(Math.random() * C) | 0]
	    		    g.edges.push({
	    		      id: data2[i].split(",")[0],
	    		      plm_oid:data2[i].split(",")[0],
	    		      plm_leftobj:data2[i].split(",")[1],
	    		      plm_rightobj:data2[i].split(",")[2],
	    		      plm_createtime:data2[i].split(",")[3],
	    		      plm_order:data2[i].split(",")[4],
	    		      plm_jianhao:data2[i].split(",")[5],
	    		      plm_number:data2[i].split(",")[6],
	    		      size: 0.5,
	    		      source: parseInt(data2[i].split(",")[1]),
	    		      target: parseInt(data2[i].split(",")[2])
	    		    });
	    		  }
	    		}
			//停止加载框
			Init.ClearToast("#webToast", 1)
			
	    		var s = new sigma({
	    		  graph: g,
	    		  settings: {
    			    edgeHoverColor: 'edge',
    			    defaultEdgeHoverColor: '#000',
    			    edgeHoverSizeRatio: 1,
    			    edgeHoverExtremities: true,
	    			enableEdgeHovering: true,
	    		  }
	    		});

			// Bind the events:
			s.bind('overNode outNode clickNode doubleClickNode rightClickNode', function(e) {
			  // console.log(e.type, e.data.node.label, e.data.captor);
			   document.getElementById("a1").innerHTML = "plm_m_oid:"+e.data.node.plm_m_oid ;
			   document.getElementById("a2").innerHTML = "plm_i_name:"+e.data.node.plm_i_name ;
			   document.getElementById("a3").innerHTML = "plm_i_createtime:"+e.data.node.	plm_i_createtime ;
			});
			s.bind('overEdge outEdge clickEdge doubleClickEdge rightClickEdge', function(e) {
				console.log("edgesss")
			  document.getElementById("a1").innerHTML = "plm_oid:"+e.data.edges.plm_oid ;
			   document.getElementById("a2").innerHTML = "plm_leftobj:"+e.data.edges.plm_leftobj ;
			   document.getElementById("a3").innerHTML = "plm_rightobj:"+e.data.edges.plm_rightobj ;
			});
		
			
	    		// Initialize cameras:
	    		s.addCamera('cam2');

	    		// Initialize the renderers:

	    		s.addRenderer({
	    		  container: document.getElementById('canvas1'),
	    		  type: 'canvas',
	    		  camera: 'cam2'
	    		});
	    		// Start the layout algorithm:
	    		s.startForceAtlas2();
//----------------------------------		
	    },
	    cache: false
	  });
	    	
	    },
	    cache: false
	  });
	} 






</script>
